<template>
	<view class="setting-page">
		<detail-head url="../mine/mine" type="none"></detail-head>
		<view class="content">
			<view class="page-title">
				<app-title text="提现设置" :width="64"></app-title>
			</view>
			<view class="setbox">
				<view class="item">
					<view class="label">真实姓名</view>
					<view class="value none">{{setStringStyleName(user.name)}}</view>
					<view class="icon none"></view>
				</view>
				<view class="item">
					<view class="label">身份证号</view>
					<view class="value none">{{setStringStyle(user.idCard)}}</view>
					<view class="icon none"></view>
				</view>
				<view class="item">
					<view class="label">支付密码</view>
					<view class="value">* * * * * *</view>
					<view class="icon" @click="openPopup('payPwdRrf')"></view>
				</view>
				<view class="item">
					<view class="label">支付宝账号</view>
					<view class="value">{{user.alipayAccount}}</view>
					<view class="icon" @click="openPopup('alipayAccountRrf')"></view>
				</view>
				<view class="item">
					<view class="label">银行卡账号</view>
					<view class="value">{{ user.bankCardAccount}}</view>
					<view class="icon" @click="openPopup('bankCardAccountRrf')"></view>
				</view>
			</view>
		</view>

		<uni-popup ref="payPwdRrf" type="bottom">
			<view class="popup">
				<view class="title">修改支付密码</view>
				<view class="item">
					<view class="back"></view>
					<view class="label">支付密码</view>
					<view class="value">
						<input type="password" maxlength="6" v-model="payPwd" />
					</view>
				</view>
				<button class="btn" type="default" @click="onChangePwd">立即修改</button>
			</view>
		</uni-popup>

		<uni-popup ref="alipayAccountRrf" type="bottom">
			<view class="popup">
				<view class="title">修改支付宝账号</view>
				<view class="item">
					<view class="back"></view>
					<view class="label">付宝账号</view>
					<view class="value">
						<input type="text" v-model="alipayAccount" />
					</view>
				</view>
				<button class="btn" type="default" @click="onChangealipayAccount">立即修改</button>
			</view>
		</uni-popup>

		<uni-popup ref="bankCardAccountRrf" type="bottom">
			<view class="popup">
				<view class="title">修改银行卡账号</view>
				<view class="item">
					<view class="back"></view>
					<view class="label">银行卡账号</view>
					<view class="value">
						<input type="text" v-model="bankCardAccount" />
					</view>
				</view>
				<button class="btn" type="default" @click="onChangebankCardAccount">立即修改</button>
			</view>
		</uni-popup>

		<uni-popup ref="imageRrf" type="bottom">
			<view class="popup">
				<view class="title">我的收款码</view>
				<image class="skcode" :src="user.receiveCode" mode=""></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import OSS from 'ali-oss'

	import {
		getUserinfo,
		setStringStyle,
		setStringStyleName
	} from '../../utils/utils.js'
	import {
		userUpdate,
		updatePassword
	} from '../../request/common-api.js'

	import {
		getSysUser
	} from '../../request/mine.js'
	export default {
		data() {
			return {
				// 用户信息
				user: {},

				// 支付密码
				payPwd: '',

				// 登录密码
				phone: '',
				oldPwd: '',
				newPwd: '',

				// 支付宝账号
				alipayAccount: '',
				// 修改银行卡账号
				bankCardAccount: '',

				// 文件
				file: null,

				// 昵称
				username: '',

				setStringStyle,
				setStringStyleName
			}
		},
		created() {
			this.user = getUserinfo()
		},
		methods: {
			// 打开弹框
			openPopup(val) {
				this.$refs[val].open('buttom')
			},

			// 关闭弹框
			closePopup(val) {
				this.$refs[val].close()
			},

			// 文件
			onFileSelect(e) {
				this.file = e.tempFiles[0]
			},

			// 更新用户数据
			async updateUserInfo() {
				try {
					let {
						code,
						data
					} = await getSysUser()
					if (code === 200) {
						let user = JSON.parse(uni.getStorageSync('user'))
						user = {
							...user,
							...data
						}
						this.user = user
						uni.setStorageSync('user', JSON.stringify(user))
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}

			},

			async onChangeLoginPwd() {
				if (!this.phone && !this.oldPwd && !this.newPwd) {
					uni.showToast({
						title: '请完整输入每一项',
						icon: 'none'
					})
					return false
				}
				try {
					let {
						code,
						message,
						data
					} = await updatePassword({
						phone: this.phone,
						oldPassword: this.oldPwd,
						newPassword: this.newPwd
					})
					if (code === 200) {
						this.phone = ''
						this.oldPwd = ''
						this.newPwd = ''
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						this.$refs.pwdRef.close()
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			async onChangebankCardAccount() {
				if (!this.bankCardAccount) {
					uni.showToast({
						title: '请完整输入每一项',
						icon: 'none'
					})
					return false
				}
				try {
					let {
						code,
						message,
						data
					} = await userUpdate({
						id: this.user.id,
						bankCardAccount: this.bankCardAccount
					})
					if (code === 200) {
						this.updateUserInfo()
						this.bankCardAccount = ''
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						this.$refs.bankCardAccountRrf.close()
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			async onChangealipayAccount() {
				if (!this.alipayAccount) {
					uni.showToast({
						title: '请完整输入每一项',
						icon: 'none'
					})
					return false
				}
				try {
					let {
						code,
						message,
						data
					} = await userUpdate({
						id: this.user.id,
						alipayAccount: this.alipayAccount
					})
					if (code === 200) {
						this.updateUserInfo()
						this.alipayAccount = ''
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						this.$refs.alipayAccountRrf.close()
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			async onChangePwd() {
				if (!this.payPwd) {
					uni.showToast({
						title: '请完整输入每一项',
						icon: 'none'
					})
					return false
				}
				try {
					let {
						code,
						message,
						data
					} = await userUpdate({
						id: this.user.id,
						payPassword: this.payPwd
					})
					if (code === 200) {
						this.payPwd = ''
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						this.$refs.payPwdRrf.close()
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			async onChangeUsername() {
				if (!this.username) {
					uni.showToast({
						title: '请完整输入每一项',
						icon: 'none'
					})
					return false
				}
				try {
					let {
						code,
						message,
						data
					} = await userUpdate({
						id: this.user.id,
						wechatNickname: this.username
					})
					if (code === 200) {
						this.username = ''
						this.updateUserInfo()
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						this.$refs.usernameRef.close()
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			async onChangeImage() {
				if (!this.file) {
					uni.showToast({
						title: '请选择上传图片',
						icon: 'none'
					})
					return false
				}
				const client = new OSS({
					region: 'oss-cn-beijing',
					bucket: 'skyskys',
					accessKeyId: 'LTAI5tHdKrPRPtXbCmbKK5Dn',
					accessKeySecret: 'LnHdjZO3nOsachitYXMfgtuNFYMoPp'
				})
				client.put(new Date().getTime() + '-' + this.file.name, this.file.file).then(async (res) => {
					try {
						let {
							code,
							message,
							data
						} = await userUpdate({
							id: this.user.id,
							wechatHeadimgurl: res.url
						})
						if (code === 200) {
							this.file = null
							this.updateUserInfo()
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							})
							this.$refs.files.clearFiles()
							this.$refs.fileRef.close()
						} else {
							uni.showToast({
								title: message,
								icon: 'none'
							})
						}
					} catch (err) {
						console.log(err)
						uni.showToast({
							title: '服务繁忙',
							icon: 'error'
						})
					}
				}).catch((err) => {
					console.log(err)
					uni.showToast({
						title: '图片上传失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-page {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 40rpx;
		background: $login-background-url no-repeat;
		background-size: 100% auto;
		background-position: 0 -40rpx;
	}

	.content {
		width: 100%;
		padding: 100rpx 30rpx 30rpx 30rpx;

		.page-title {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.setbox {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			background: $setting-huxing-url no-repeat;
			background-size: 100% 100%;
			background-position: 0 0;
			padding: 100rpx 10rpx 40rpx 10rpx;

			.item {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				position: relative;
				margin-bottom: 40rpx;

				.label {
					width: 160rpx;
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #BFCBCD;
					text-indent: 20rpx;
				}

				.qrbox {
					display: flex;
					margin: 0 20rpx;

					.qrCode {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.value {
					flex: 1;
					max-width: 450rpx;
					height: 66rpx;
					line-height: 66rpx;
					background: linear-gradient(45deg, #050505, #383838);
					border-radius: 12rpx;
					text-indent: 10rpx;
					color: #7B7B7B;
					margin: 0 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.icon {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					background: $setting-edit-url no-repeat;
					background-size: 60% 60%;
					background-position: center center;
				}

				.none {
					background: none;
				}
			}
		}
	}

	.popup {
		width: 100%;
		min-height: 300rpx;
		padding: 0 40rpx;
		background: $login-resetbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;

		.title {
			line-height: 60rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
		}

		.item {
			width: 100%;
			height: 66rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 40rpx;
			margin: 20rpx;

			.back {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				background: linear-gradient(270deg, rgba(141, 141, 141, 0) 0%, #545454 100%);
				opacity: 0.78;
				position: absolute;
				top: 50%;
				left: 20rpx;
				transform: translateY(-50%);
			}

			.label {
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #BFCBCD;
				text-indent: 20rpx;
				margin-right: 40rpx;
			}

			.value {
				flex: 1;
				height: 66rpx;
				background: linear-gradient(45deg, #050505, #383838);
				border-radius: 12rpx;
				line-height: 60rpx;
				text-indent: 10rpx;
				color: #7B7B7B;

				input {
					width: 100%;
					height: 100%;
					text-indent: 10rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #7B7B7B;
				}
			}

			.type {
				background: none;
				display: flex;
				align-items: center;
				color: #7B7B7B;

				.icon {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					background: $wallet-zfb-url no-repeat;
					background-size: 100% 100%;
					background-position: 0 0;
				}
			}
		}

		.file {
			height: 200rpx;

			.value {
				height: 100%;
				background: none;
				text-indent: 0;
			}

			/deep/ .uni-progress-bar {
				display: none;
			}
		}

		.btn {
			width: 684rpx;
			height: 88rpx;
			margin: 20rpx 0;
			line-height: 88rpx;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 22px;
			border: 1px solid #FFBD47;
			font-size: 14px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFBD47;
		}

		.skcode {
			max-height: 1000rpx;
		}
	}
</style>
